<template>
	<view class="content">
		<a-demo title="基础使用" desc="此组件只是为了快速布局使用，默认无背景，下方为了演示添加了背景">
			<text class="text">不要把我们分开~😭</text>
			<pure-gap></pure-gap>
			<text class="text">你怎么这么无情~💔</text>
		</a-demo>

		<a-demo title="行内模式" class="warning">
			<text>你打我撒，你打我撒，</text>
			<pure-gap inline></pure-gap>
			<text>你打我撒。</text>
		</a-demo>
	</view>
</template>

<script setup>
import { ref } from "vue";


</script>

<style scoped>
.content {
	--pure-gap-background: #606266;
}

.text {
	font-weight: 600;
	line-height: 2;
}

.warning {
	--pure-gap-background: var(--pure-theme-warning);
}
</style>
